.upload-container{
  .upload-content{
    display: block;
    &.upload-content-hidden{
      height: 0;
    }
  }
  .upload-btn{
    border: 1px dashed $btn-border;
    border-radius: 4px;
    cursor: pointer;
    &.upload-image-btn{
      width: 80px;
      height: 80px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
    .upload-btn-icon {
      font-size: 32px;
      color: #999;
    }
    &:focus{
      background: #fff;
      border-color: #cdd7ec;
    }
    &:hover{
      background-color: #edf3ff;
    }
  }
  .tips-container{
    margin-top: 8px;
    .upload-tips{
      font-size: 12px;
      color: #848C95;
      line-height: 16px;
      .anticon-info-circle-o{
        margin-left: 5px;
        color: #4B8DFF;
      }
    }
  }
  .file-list-container{
    margin-top: 12px;
    .file-list-content{
      max-height: 500px;
      overflow: hidden;
      transition: max-height 0.3s ease;
      &.file-list-no-expand{
        max-height: 110px;
        overflow: hidden;
        &.file-list-content-no-name{
          max-height: 90px;
        }
      }
    }
    .file-item{
      display: inline-block;
      width: 80px;
      min-height: 80px;
      margin-right: 20px;
      vertical-align: top;
      &.file-item-no-name{
        margin-bottom: 10px;
      }
      .thumb-image-wrapper{
        position: relative;
        display: inline-block;
        height: 80px;
        width: 80px;
        vertical-align: middle;
        overflow: hidden;
        border: 1px solid #CDD7EC;
        text-align: center;
        line-height: 80px;
        background: #F7F8FA;
        border-radius: 4px;
        cursor: pointer;
        &:hover{
          border: 1px solid #4B8DFF;
          .thumb-action-btns{
            bottom: 0px;
          }
        }
        .thumb-image{
          max-width: 32px;
          &.image-thumb{
            max-width: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
          }
        }
        .thumb-action-btns{
          display: flex;
          align-items: center;
          justify-content: space-around;
          position: absolute;
          bottom: -28px;
          width: 100%;
          height: 28px;
          color: white;
          text-align: center;
          border-radius: 0 0 4px 4px;
          background: rgba(0,0,0,0.55);
          transition: bottom 0.3s ease;
          font-weight: 600;
          .action-icon{
            cursor: pointer;
          }
        }
      }
      .file-loading-wrapper{
        border: 0 solid #CDD7EC;
        border-radius: 4px;
        padding: 0 8px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .upload-text{
          font-size: 12px;
          color: #848C95;
        }

        .loading-progress{
          position: absolute;
          width: 64px;
          bottom: 8px;
          .ant-progress-inner{
            background-color: #EBF0F5;
          }
          .ant-progress-bg{
            background-color: #32CD91;
          }
        }
      }
      .file-name{
        font-size: 12px;
        color: #848C95;
        margin-top: 8px;
        display: inline-block;
        width: 100%;
        height: 16px;
        line-height: 16px;
      }
    }
  }
  .toggle-btn-wrapper{
    .toggle-btns{
      display: inline-block;
      cursor: pointer;
      font-size: 12px;
      color: #1F70FC;
      line-height: 16px;
      .icon{
        margin-left: 3px;
      }
    }
  }
}
